<template>
  <div>
    <!-- 图片，把它当作按钮
      点它，就打开一个对话框
    -->
    <div class="btn_img" @click="openDialog()">
      <img :src="coverImageUrl" />
    </div>
    <!-- 对话框 -->
    <el-dialog
      append-to-body
      title="上传素材"
      :visible.sync="dialogVisible">
      <el-tabs v-model="activeName" type="card">
        <el-tab-pane label="素材库" name="images">
          <div>
            <el-radio-group v-model="isCollected" size="mini" @change="hSwitchCollect">
              <el-radio-button label="全部"></el-radio-button>
              <el-radio-button label="收藏"></el-radio-button>
            </el-radio-group>
          </div>

          <el-row :gutter="10" class="img_list">
            <!-- 如果当前的image.url与数据项中的一致，则要添加selected类 -->
            <el-col
              v-for="image in images"
              :key="image.id"
              class="img_item"
              :class='{selected: image.url===selectedImageUrl}'
              :span="4">
                  <el-image
                  @click="hSelectImage(image.url)"
                  style="height: 100px;"
                  :src="image.url"
                  fit="cover"></el-image>
            </el-col>
          </el-row>

          <el-pagination
            background
            layout="prev, pager, next"
            :page-size="10"
            @current-change="hCurrentChange"
            :total="total_count">
          </el-pagination>

        </el-tab-pane>

        <el-tab-pane label="上传图片" name="uploads">
           <!--
            [el-upload](https://element.eleme.cn/#/zh-CN/component/upload#yong-hu-tou-xiang-shang-chuan)的主要属性：
            // 不走axios请求
            // 不走axios请求
            // 不走axios请求
            // 不走axios请求
            - action： 必选参数，上传的地址：http://ttapi.research.itcast.cn/mp/v1_0/user/images
            - headers: 设置上传的请求头部。要携带token
            - name：上传的文件字段名。要与接口中要求保持一致。
            - show-file-list： 是否显示已上传文件列表
            - before-upload: 上传之前对文件进行检测。
            - on-success：文件上传成功时的钩子。`function(response, file, fileList)` -->
          <el-upload
            class="avatar-uploader"
            action="http://api-toutiao-web.itheima.net/mp/v1_0/user/images"
            name="image"
            :headers="headers"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
              <!-- 如果上传成功了，就显示这个图片 -->
              <!-- 对于图片来说，并不是一旦设置了src之后，就立即可以看到效果 -->
              <!-- <img v-if="uploadImageUrl" :src="uploadImageUrl" class="avatar"> -->
              <!-- load事件：表示这张图已经加载完成，用户肯定是可以能看到了 -->
              <el-image v-if="uploadImageUrl" :src="uploadImageUrl" class="avatar" @load="hImageLoad" />
              <!-- 否则，显示加号 -->
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>

        </el-tab-pane>
      </el-tabs>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="hConfirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// @ 表示src
import defaultImg from '@/assets/default.png'
export default {
  name: 'cover',
  props: ['value'], // 收到父组件通过v-model传入的值
  data () {
    return {
      // coverImageUrl: '../assets/default.png', // 封面预览图片
      coverImageUrl: defaultImg, // 封面预览图片
      headers: {
        Authorization: `Bearer ${localStorage.getItem('tokenStr')}`
      },
      uploadImageUrl: '', // 用户上传之后的图片的地址

      selectedImageUrl: '', // 记录当前被选中的图片的地址
      page: 1, // 页码
      images: [], // 图片列表
      total_count: 0, // 总页数
      isCollected: '全部',
      activeName: 'images', // 哪个tab签处于选中状态
      dialogVisible: false
    }
  },
  watch: {
    // 基础格式： 属性名(新值，旧值) {}
    // value (newVal, oldVal) {
    //   console.log('图片变化了', oldVal, newVal)
    //   this.coverImageUrl = newVal
    // }
    // 高级格式：
    // 属性名: {
    // handler: function (newVal, oldVal) {

    // },
    // immediate: true or false.如果是true，它会立即（它获取值时）执行一次
    // }
    //
    value: {
      handler: function (newVal, oldVal) {
        console.log('图片变化了', oldVal, newVal)
        this.coverImageUrl = newVal
      },
      immediate: true
    }
  },
  methods: {
    // 用户点击了确认
    // 在如下两种情况下，点击是有效的；
    // if (素材库 && 用户选中元素)  {
    // else if( 上传 && 已经完成了上传) {
    hConfirm () {
      // 尽早返回
      if (this.activeName === 'images' && this.selectedImageUrl === '') {
        this.$message.error('请先选中图片')
        return
      }

      if (this.activeName === 'uploads' && this.uploadImageUrl === '') {
        this.$message.error('请先上传图片')
        return
      }

      // 如果代码能到这里来，就说明用户的操作一定是正确的
      this.coverImageUrl = this.activeName === 'images' ? this.selectedImageUrl : this.uploadImageUrl

      // 由于在父组件使用的是v-model，所以这里直接 抛出input事件及数据
      this.$emit('input', this.coverImageUrl)
      // 关闭对话框
      this.dialogVisible = false
    },
    // 上传成功，会自动调用
    //  -  res就是接口返回的数据
    //  -  file:文件对象
    handleAvatarSuccess (res, file) {
      console.log('上传成功', res, file)
      this.$message.success('上传成功')
      //  是不是赋值之后，用户立即就可以看到图？
      this.uploadImageUrl = res.data.url
    },
    // 对图片的有效性进行检测
    beforeAvatarUpload (file) {
      const isJPG = file.type === 'image/jpeg'

      // 是否小于2M
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    hSelectImage (url) {
      console.log('选中图片', url)
      this.selectedImageUrl = url
    },
    // 单独封装一个方法来获取当前的查询参数
    buildParams () {
      const paramObj = {
        // collect  否 true 或 false 是否是收藏的图片
        collect: this.isCollected === '收藏',
        // page     否 页数
        page: this.page,
        // per_page 否 每页数量
        per_page: 10
      }
      return paramObj
    },
    async loadImages () {
      try {
        const params = this.buildParams()

        const res = await this.$axios({
          method: 'GET',
          url: '/mp/v1_0/user/images',
          params
        })
        console.log(res)
        // 保存数据
        this.images = res.data.data.results
        this.total_count = res.data.data.total_count
      } catch (err) {
        console.log(err)
      }
    },
    // 用户点击页码
    hCurrentChange (curPage) {
      // 1. 更新页码
      this.page = curPage
      // 2. 重发请求
      this.loadImages()
    },
    // 用户在收藏和全部 之间切换
    hSwitchCollect () {
      this.page = 1
      this.loadImages()
    },
    // 点击封面图片
    openDialog () {
      // 1. 弹出对话框
      this.dialogVisible = true

      // 2. 把上一次的结果清空掉
      this.selectedImageUrl = ''
      this.uploadImageUrl = ''
      // 3. 加载图片
      this.loadImages()
    }
  }
}
</script>

<style scoped lang='less'>
// 图片按钮
.btn_img {
  cursor: pointer;
  width: 150px;
  height: 150px;
  border: 1px dashed #ddd;
  img {
    width: 100%;
    height: 100%;
    display: block;
  }
}

// 添加一个伪元素， 伪元素有一个表示 选中 的背景图（png）
.selected::after{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.3) url(../assets/selected.png) no-repeat center / 50px 50px;
}
// 素材列表

.img_list{
  margin-top: 15px;
  .img_item{
    position: relative;
    width: 150px;
    height: 120px;
    border: 1px dashed #ddd;
    display: inline-block;
    margin-right: 15px;
    /deep/ img {
      width: 100%;
      height: 100%;
      display: block;

      cursor: pointer
    }
  }
}
.avatar-uploader {
    text-align: center;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}
.avatar-uploader /deep/ .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
</style>
